<template>
  <div class="edit-contain">
    <!-- 顶部栏 -->
    <navbar
      :title="title"
      @back="back"
      @save="save"
      :isSave="value !== user[prop]"
    ></navbar>
    <!-- 输入框 -->
    <div class="ipt" v-if="prop !== 'avatar'">
      <van-field v-model="value" class="text" />
    </div>
    <!-- 头像上传框 -->
    <div class="upload" v-else>
      <van-uploader
        :after-read="afterRead"
        :before-read="beforeRead"
        v-model="fileList"
        :max-count="1"
      />
    </div>
  </div>
</template>

<script>
// 导入vuex辅助函数
import { mapActions, mapState } from 'vuex'
// 导入请求接口
import { editInfo, upload } from '../../../api/login.js'
export default {
  name: 'editInfo',
  data () {
    return {
      // 基地址
      baseUrl: process.env.VUE_APP_URL,
      // 输入框内容
      value: '',
      // 标题内容
      title: '',
      // 接受当前属性
      prop: '',
      fileList: [{ url: '' }]
    }
  },
  methods: {
    // 导入辅助函数
    ...mapActions(['upDateUser']),
    // 图片上传前的回调
    beforeRead (file) {
      //   console.log(file)
      const isType = file.type === 'image/jpeg'
      const isSize = file.size / 1024 / 1024 <= 2
      if (!isType) {
        this.$toast.fail('只能上传jpg格式的图片')
      }
      if (!isSize) {
        this.$toast.fail('图片大小不能超过2M')
      }
      return isSize && isType
    },
    // 图片上传后的回调函数
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      const res = await upload(file.file)
      //   console.log(res.data.data[0].id)
      const id = res.data.data[0].id
      //   动态赋值给value
      this.value = id
    },
    // 保存事件
    async save () {
      //   if (this.prop === 'nickname') {
      // 提示框
      this.$toast({
        type: 'loading',
        message: '正在修改......',
        duration: 0
      })
      // 根据内容发起请求
      await editInfo({
        [this.prop]: this.value
      })
      // 刷新vuex中的数据
      // 更新用户信息
      this.upDateUser()
      // 跳转回我的资料页面
      this.$router.back()
      this.$toast.clear()
      //   }
    },
    back () {
      this.$router.back()
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    // 动态设置标题
    if (this.$route.query.prop === 'nickname') {
      this.title = '修改昵称'
    } else if (this.$route.query.prop === 'intro') {
      this.title = '修改个人简介'
    } else if (this.$route.query.prop === 'position') {
      this.title = '修改岗位'
    } else if (this.$route.query.prop === 'avatar') {
      this.title = '修改头像'
      // 传入之前图片的url
      this.fileList[0].url = this.baseUrl + this.$store.state.user.avatar
    }
    // 接受当前属性
    this.prop = this.$route.query.prop
    // 动态展示内容
    this.value = this.user[this.prop]
  }
}
</script>

<style lang="less" scoped>
.edit-contain {
  .ipt {
    border-top: 1px solid #ccc;
    padding: 15px;
    .text {
      background-color: #f7f4f5;
    }
  }
  .upload {
    text-align: center;
    /deep/ .van-uploader__preview-image,
    /deep/ .van-image__img,
    /deep/ .van-uploader__upload {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
